import React    from 'react'
import { Form, Input, Button, Row,Col,Modal  } from 'antd'
import { LockOutlined, UserOutlined } from '@ant-design/icons';
import './login.css'
import CaptchaSvg from "../svg/CaptchaSvg";
import useLogin  from './hooks/useLogin'
const Login = ({ handleShowOpen, open }) => {
    const handleCancel = close => {
        handleShowOpen(false)
    }
    const { handleLogin, loading,error,captchaRef } = useLogin(handleCancel)

    return (
        <Modal
            title="登录"
            centered
            width={400}
            footer={null}
            open={open}
            onCancel={handleCancel}
            okText="确认"
            cancelText="取消"
        >
            <Form
                className="login-container"
                onFinish={handleLogin}
            >
                <Form.Item
                    name="email"
                    rules={[{required: true, message: '请输入邮箱'}]}
                >
                    <Input size="large" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="邮箱" />
                </Form.Item>
                <Form.Item
                    name="password"
                    rules={[{required: true, message: '请输入密码'}]}
                >
                    <Input.Password
                        size="large"
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        type="password"
                        placeholder="密码"
                    />
                </Form.Item>
                <Form.Item
                >
                    <Row gutter={8}>
                        <Col span={16}>
                            <Form.Item
                                name="captcha"
                                className={"captcha"}
                                rules={[{required: true, message: '请输入验证码'}]}
                                noStyle
                            >
                                <Input
                                    size="large"
                                    style={{ width: '200px' }}
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                    placeholder="验证码"
                                />
                            </Form.Item>
                        </Col>
                        <Col span={8}>
                            <CaptchaSvg ref={captchaRef}  error={error} />
                        </Col>
                    </Row>
                </Form.Item>
                <Form.Item>
                    <Button size={"large"} loading={loading} style={{ width: '100%' }} type="primary" htmlType="submit" className="login-form-button">
                        登录
                    </Button>
                </Form.Item>
            </Form>
        </Modal>
    )
}

export default Login
